<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <script type="text/javascript">
            function start() {
                PF('startButton1').disable();

                window['progress'] = setInterval(function () {
                    var pbClient = PF('pbClient'),
                            oldValue = pbClient.getValue(),
                            newValue = oldValue + 10;

                    pbClient.setValue(pbClient.getValue() + 10);

                    if (newValue === 100) {
                        clearInterval(window['progress']);
                    }


                }, 1000);
            }

            function cancel() {
                clearInterval(window['progress']);
                PF('pbClient').setValue(0);
                PF('startButton1').enable();
            }

        </script>

        <!-- Left column -->
        <div class="Container50 Responsive100 NoIndent">
            <div class="Container100">
                <div class="Card">
                    <h1 class="CardBigTopic">ProgressBar - Client</h1>
                    <div class="SeparatorFull"/>
                    <p:growl id="progressGrowl" />
                    <h:form>
                        <p:commandButton id="start" value="Start" type="button" onclick="start()" widgetVar="startButton1"/>
                        <p:commandButton id="cancel" value="Cancel" type="button" onclick="cancel()" />
                        <br /><br />
                        <p:progressBar id="progressBarClient" widgetVar="pbClient"/>
                    </h:form>
                </div>
            </div>

            <div class="Container100">
                <div class="Card">
                    <h1 class="CardBigTopic">ProgressBar - Ajax</h1>
                    <div class="SeparatorFull"/>
                    <h:form>
                        <p:commandButton value="Start" type="button" onclick="PF('pbAjax').start(); PF('startButton2').disable();" widgetVar="startButton2" />
                        <p:commandButton value="Cancel" actionListener="#{progressBarView.cancel}" oncomplete="PF('pbAjax').cancel();PF('startButton2').enable();" />
                        <br /><br />
                        <p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBarView.progress}" labelTemplate="{value}%" styleClass="animated" global="false">
                            <p:ajax event="complete" listener="#{progressBarView.onComplete}" update="progressGrowl" oncomplete="PF('startButton2').enable()"/>
                        </p:progressBar>
                    </h:form>
                </div>
            </div>

            <div class="Container100 ui-fluid">
                <div class="Card">
                    <h1 class="CardBigTopic">ProgressBar - Static Display</h1>
                    <div class="SeparatorFull"/>
                    <h:form>
                        <p:progressBar value="50" labelTemplate="{value}%" displayOnly="true"/>
                    </h:form>
                </div>
            </div>
        </div>

        <!-- Right column -->
        <div class="Container50 Responsive100 NoIndent">
            <div class="Container100 ui-fluid">
                <div class="Card">
                    <h1 class="CardBigTopic">Galleria</h1>
                    <div class="SeparatorFull"/>
                    <p:galleria value="#{imagesView.images}" var="image" panelWidth="500" panelHeight="313" showCaption="true">
                        <p:graphicImage name="demo/images/nature/#{image}" alt="Image Description for #{image}" title="#{image}"/>
                    </p:galleria>
                </div>
            </div>

            <div class="Container100 ui-fluid">
                <div class="Card">
                    <div class="Container50 NoIndent Responsive50">
                        <h1 class="CardBigTopic">Clock Sample - Client</h1>
                        <div class="SeparatorFull"/>
                        <p:clock />
                    </div>
                    <div class="EmptyBox10 ShowOnMobile"/>
                    <div class="Container50 NoIndent Responsive50">
                        <h1 class="CardBigTopic">Clock Sample - Server</h1>
                        <div class="SeparatorFull"/>
                        <p:clock mode="server" pattern="yyyy-MM-dd HH:mm:ss" />
                    </div>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>